<?php
error_reporting(0);
include 'mysqlconnect.php';
$params = array(
    'hostname' => '127.0.0.1',
    'dbname' => 'level',
    'username' => 'root',
    'password' => ''
);
$connect = new mysqlconnect($params);
$connect->connect();
$bg_images = $connect->fetch('select filename from bg_image where menu_id=5 order by order_id');
?>
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="src/css/index.css">
        <script type="text/javascript" src = "src/js/jquery-1.7.1.js"></script>
        <script type="text/javascript" src = "src/js/cases.js"></script>
    </head>
    <body>
        <div class = "about-container" id = "cases-module">
            <div class = "background-img">
                <div class = "for-left-nav"></div>
                <div class = "left-nav">
                    <div class = "nav-top">
                        <div class = "menu">
                            <a href="javascript:;" href ="/index.php">MENU</a>
                        </div>
                        <div class = "logo">
                            <a href="index.php"><img src="res/logo.png"></a>
                        </div>
                    </div>
                    <div class = "nav-bottom">
                        <div class = "level-pager">
                            <span></span><p class = "pager-chinese">案例</p><p class = "pager-english">CASES</p>
                        </div>
                        <ul id="nav">
                            <i></i><li><a href="aboutLevel.php">LEVEL</a><p>力洋</p></li>
                            <i></i><li><a href="news.php">NEWS</a><p>新闻</p></li>
                            <i></i><li><a href="service.php">SERVICES</a><p>服务</p></li>
                            <i></i><li id="selected"><a href="cases.php">CASES</a><p>案例</p></li>
                            <i></i><li><a href="career.php">CAREER</a><p>职业</p></li>
                        </ul>
                        <div class = "footer">
                            <div class = "contact">
                                <a href="aboutLevel.php">CONTACT<i></i></a>
                            </div>
                            <div class = "appendix">
                                <a href="mailto:info@leveldisplay.com">
                                    <img class = "appendix-img" src="res/appendix.png">
                                </a>
                                <a href="http://e.weibo.com/LEVELDISIGN"><img class = "weibo-img" src="res/weibo.png"></a>
                                <img class = "weixin-img" src="res/weixin.png">
                                <img  class = "code-for-weixin"src="res/code.jpg" style = "width:200px;height:200px;">
                                <p>Copyrights Reserved tacheworks Design(China)Ltd.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class = "cases-div">
                    <div class = "case-title">
                        <a href="javascript:;" data-id = "1">
                            <p class= "english">EXHIBITION</p>
                            <p class = "chinese">展览展示</p>
                        </a>
                        <a href="javascript:;" data-id = "2">
                            <p class= "english">COMMERCIAL SPACE</p>
                            <p class = "chinese">商业空间</p>
                        </a>
                        <a href="javascript:;" data-id = "3">
                            <p class= "english">THEME EXHIBITION HALL</p>
                            <p class = "chinese">展厅主题馆</p>
                        </a>
                        <a href="javascript:;" data-id = "4">
                            <p class= "english">GRAPHICS</p>
                            <p class = "chinese">平面设计</p>
                        </a>
                        <a href="javascript:;" data-id = "5">
                            <p class= "english">EVENTS PLAN</p>
                            <p class = "chinese">活动策划</p>
                        </a>
                    </div>
                    <div class = "case-year">
                        <a href="javascript:;">2013</a>
                        <a href="javascript:;">2012</a>
                        <a href="javascript:;">2011</a>
                        <a href="javascript:;">2010</a>
                        <a href="javascript:;">2009</a>
                        <a href="javascript:;">2008</a>
                        <a href="javascript:;">2007</a>
                        <a href="javascript:;">2006</a>
                        <a href="javascript:;">2005</a>
                        <a href="javascript:;">2004</a>
                        <a href="javascript:;">2003</a>
                        <a href="javascript:;">2002</a>
                    </div>
                </div>
                <div class = "case-detail">
                    <ul id= "case-exhibition">
                    </ul>
                </div>
                <div class = "case-show">
                    <a href="javascript:;" class = "detail-pic"></a>
                    <a href="javascript:;" class = "show-left"></a>
                    <a href="javascript:;" class = "show-right"></a>
                    <a href="javascript:;" class = "show-menu"></a>
                    <div class = "show-info">
                        <p class = "english-text"></p><p class = "chinese-text"></p>
                        <p class= "content"></p>
                    </div>
                    <div class = "show-detail">
                        <span class = "detail-1">
                            <img src="res/detail-1.png">
                            <p></p>
                        </span>
                        <span class = "detail-2">
                            <img src="res/detail-2.png">
                            <p></p>
                        </span>
                        <span class = "detail-3">
                            <img src="res/detail-3.png">
                            <p></p>
                        </span>
                        <span class = "detail-4">
                            <img src="res/detail-4.png">
                            <p></p>
                        </span>
                        <span class = "detail-5">
                            <img src="res/detail-5.png">
                            <p></p>
                        </span>
                        <span class = "detail-6">
                            <img src="res/detail-6.png">
                            <p></p>
                        </span>
                    </div>
                    <div class = "show-deatil-pic">
                        <img src="">
                        <a href="javascript:;" class = "detail-close-btn"></a>
                        <a href="javascript:;" class = "detail-left-btn"></a>
                        <a href="javascript:;" class = "detail-right-btn"></a>
                    </div>
                </div>
            </div>
            <div class = "staf-max">
                <img src="res/staff.jpg">
                <a href="javascript:;" class = "staff-hide"></a>
            </div>
            <footer>
                <div id = "progress-back">
                    <div id = "progress-bar"></div>
                </div>
            </footer>
        </div>
        <ul id = "surprised">
            <?php
            if (!isset($_GET['id'])) {
                for ($i = 0; $i < count($bg_images); $i++) {
                    ?>
                    <li class = "slide-0<?php echo $i + 1; ?>">
                        <img src="bg_image/<?php echo $bg_images[$i]['filename'] ?>">
                    </li>
    <?php }
} ?>
        </ul>
        <script type="text/javascript" src="src/js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="src/js/jquery.spasticNavForService.js"></script>	
        <script type="text/javascript">
            $('#nav').spasticNav();
        </script>
    </body>
</html>
